<template>
    <div class="nav">
        <a-space class="navbar">
            <a-trigger position="bottom" auto-fit-position :unmount-on-close="false">
                <a-button title="源码">
                    <template #icon>
                        <icon-code />
                    </template>
                </a-button>
                <template #content>
                    <div class="site-code">
                        <p>网站源码</p>
                        <a-button><a target="_blank" href="https://gitee.com/baymaxsjj">Gitee</a></a-button>
                        <a-button><a target="_blank" href="https://github.com/baymaxsjj/mgo_music"> Github</a></a-button>
                    </div>

                </template>
            </a-trigger>
            <a-trigger position="bottom" auto-fit-position :unmount-on-close="false">
                <a-button title="皮肤">
                    <template #icon>
                        <icon-skin />
                    </template>
                </a-button>
                <template #content>
                    <ul class="skin-list">
                        <li v-for="(item, index) of skinList" :key="item.url" @click="setSkin(index)"
                            :style="{ 'background-image': `url(${item.url})` }">
                            <icon-check-circle class="skin-check" v-show="index == skinIndex" />
                            <p class="skin-name">{{ item.name }}</p>
                        </li>
                    </ul>
                </template>
            </a-trigger>
            <a-trigger position="bottom" auto-fit-position :unmount-on-close="false">
                <a-button title="设置">
                    <template #icon>
                        <icon-settings />
                    </template>
                </a-button>
                <template #content>
                    <a-space class="setting">
                        <a-select v-model="serve" :style="{ width: '320px' }" placeholder="音乐搜索引擎" @change="changeServe">
                            <template #prefix>
                                音乐搜索引擎：
                            </template>
                            <a-option :value="1" label="本地搜索引擎(搜索快,播放慢,本地接口)"></a-option>
                            <a-option :value="0" label="代理搜索引擎(搜索慢,播放快,他人接口)"></a-option>
                        </a-select>
                    </a-space>
                </template>
            </a-trigger>
            <a-button title="最大化" @click="FullScreen">
                <template #icon>
                    <icon-fullscreen-exit v-if="isFull" />
                    <icon-fullscreen v-else />
                </template>
            </a-button>
        </a-space>
    </div>
</template>

<script setup>
import { Message } from '@arco-design/web-vue';
import { ref } from 'vue';
import { skinList, skinIndex, setSkin } from '../utils/skin';
import { setSearchServe, searchServe } from '../utils/searchServe'
import {
    isFUllScreenEnabled,
    exitFullScreen, setFullScreen, hasFullScreenElement
} from '../utils/screen';
console.log(skinIndex.value)
console.log(searchServe.value)
const serve = ref(searchServe.value)
const changeServe = () => {
    setSearchServe(serve.value)
}

const isFull = ref(hasFullScreenElement())

const FullScreen = () => {
    if (!isFUllScreenEnabled()) {
        Message.error("浏览器不支持~")
    } else {
        if (isFull.value) {
            exitFullScreen()
            isFull.value = false
        } else {
            setFullScreen(document.documentElement)
            isFull.value = true
        }
    }

}
</script>

<style lang="less" scoped>
.nav {
    .navbar {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 999;

        ::v-deep(.arco-btn-secondary, ) {
            background-color: rgba(0, 0, 0, 10%);
            color: var(--color-fill-1);
        }

    }
}

.setting {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    background-color: var(--color-fill-1);
    padding: 10px;
    border-radius: 5px;
}

.site-code {
    background-color: var(--color-fill-1);
    padding: 10px;
    border-radius: 5px;
    font-size: 16px;
    text-align: center;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);

    p {
        margin-bottom: 10px;
    }
}

.skin-list {
    display: flex;
    align-items: center;
    background-color: var(--color-fill-1);
    padding: 5px;
    border-radius: 5px;
    max-width: 323px;
    max-height: 180px;
    overflow-y: auto;
    flex-wrap: wrap;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);

    li {
        position: relative;
        width: 150px;
        height: 80px;
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: center;
        margin: 5px;
        border-radius: 3px;
        overflow: hidden;
        transition: all .5s;
        cursor: pointer;

        &:hover {
            background-size: 120%;
        }

        .skin-check {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -80%);
            font-size: 30px;
            color: rgba(255, 255, 255, 70%);
        }

        .skin-name {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            text-align: center;
            color: var(--color-fill-1);
            background-color: rgba(0, 0, 0, 20%);
            font-size: 14px;
            padding: 5px 0;
        }
    }
}
</style>